<template>
    <div v-show="visible">
        <div class="grid_cont">
            <div style="display:flex;">
                <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
                <div style="margin-left:10px;font-size: 16px;line-height: 16px;">提交信息</div>
            </div>
            <div
                style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:30px;">
            </div>
            <el-form :model="formParams" style="margin-left:14px;">
                <el-form-item label="归属区域：" prop="">
                    <el-input v-model="formParams.area" disabled style="width: 320px;" />
                </el-form-item>
                <el-form-item label="选择用户：" prop="">
                    <el-input v-model="formParams.user" disabled style="width: 320px;" />
                </el-form-item>
                <el-form-item label="联系电话：" prop="">
                    <el-input v-model="formParams.telephone" disabled style="width: 320px;" />
                </el-form-item>
                <el-form-item label="角色：" prop="" style="margin-left:28px;">
                    <el-input v-model="formParams.role" disabled style="width: 320px;" />
                </el-form-item>
                <el-form-item label="人员身份：" prop="identity">
                    <el-select v-model="formParams.identity" disabled multiple placeholder=" " placement="bottom"
                        style="width: 320px;">
                        <el-option v-for="item in optionidentity" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="display:flex;margin-bottom:20px;">
                <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
                <div style="margin-left:10px;font-size: 16px;line-height: 16px;">审核</div>
            </div>
            <el-form :model="formData">
                <el-form-item label="审核结果：" style="margin-left:14px;">
                    <el-radio-group v-model="formData.result">
                        <el-radio label='true'>通过</el-radio>
                        <el-radio label='false'>驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item required prop="situation" v-if="formData.result === 'false'" label="驳回说明：" :rules="[
                    { required: true, message: '驳回说明不能为空！' }]" style="margin-left: 4px;">
                    <el-input v-model="formData.situation" maxlength="20" style="width: 320px;" placeholder=""
                        show-word-limit type="textarea" />
                </el-form-item>
            </el-form>
        </div>
        <div class="grid_cont2">
            <el-button class="grid_btn" @click="gridCancel"
                style="background-color: rgba(255, 255, 255, 1);border: 1px solid rgba(187, 187, 187, 1);color: rgba(142, 142, 142, 1);">返回</el-button>
            <el-button class="grid_btn" @click="gridSure"
                style="background-color:#FF9900;border: 1px solid #FF9900;color:#fff;">审核</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as getgridApi from '@/api/countryside/gridmanagement/index'
import globalApi from '@/api/spb/global'
const formParams = reactive({
    area: '',
    user: '',
    telephone: '',
    role: '',
    identity: [],
})
const formData = reactive({
    result: 'true',
    situation: '',
})
const visible = ref(false)
const props = defineProps({
    examineShow: {
        type: Boolean,
        default: false
    },
    editData: {
        type: Object
    }
})
/** 获取角色类型列表 */
const optionrole = ref([])
const getroleTypeData = () => {
    const params = {
        pageNo: 1,
        pageSize: 100,
        dictType: 'countryside_role_type'
    }
    globalApi.getDictData(params).then((res) => {
        optionrole.value = res.list
    })
}
// 角色类型字段映射
const roletypeRelate = (item) => {
    let content = ''
    optionrole.value.forEach((t) => {
        if (t.value == item) {
            content = t.label
        }
    })
    return content
}
const optionidentity = ref([])
/** 获取人员身份类型列表 */
const getTypeData = () => {
    const params = {
        pageNo: 1,
        pageSize: 100,
        dictType: 'countryside_person_identity'
    }
    globalApi.getDictData(params).then((res) => {
        optionidentity.value = []
        res.list.forEach((item) => {
            optionidentity.value.push({
                label: item.label,
                value: item.value
            })
        })
    })
}
const emit = defineEmits(['getexamineShow', 'geteditData'])
watch(() => props.examineShow, (val) => {
    visible.value = val
}, { immediate: true })
watch(() => props.editData, (val) => {
    if (val) {
        formParams.area = val.gridBelonged
        formParams.user = val.memberName
        formParams.telephone = val.telephone
        formParams.role = roletypeRelate(val.role)
        formData.result = val.result
        formData.situation = val.situation
        if (props.examineShow === true) {
            formParams.identity = val.identity.join(',').split(',')
        }
    }
}, { immediate: true })

/** 取消按钮操作 */
const gridCancel = () => {
    visible.value = false
    emit('getexamineShow', visible.value)
    emit('geteditData', props.editData.pageNo)
}
/** 确定按钮操作 */
const gridSure = () => {
    const GridmemberInfoData = {
        auditResult: JSON.parse(formData.result),
        auditComment: formData.situation,
        id: props.editData.id
    }
    if (formData.result === 'true') {
        formData.situation = ''
        ElMessageBox.confirm(
            '是否确认通过审核?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                getgridApi.getGridmemberInfo(GridmemberInfoData).then((res) => {
                    if (res) {
                        ElMessage.success('审核通过！')
                        visible.value = false
                        emit('getexamineShow', visible.value)
                        emit('geteditData', props.editData.pageNo)
                    }
                })
            })
            .catch(() => {
                ElMessage.info('已取消审核')
            })
        return
    }
    if (formData.result === 'false' && formData.situation && formData.situation.trim()) {
        ElMessageBox.confirm(
            '是否确认驳回审核?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                getgridApi.getGridmemberInfo(GridmemberInfoData).then((res) => {
                    if (res) {
                        ElMessage.success('审核驳回成功！')
                        visible.value = false
                        emit('getexamineShow', visible.value)
                        emit('geteditData', props.editData.pageNo)
                    }
                })
            })
            .catch(() => {
                ElMessage.info('已取消审核')
            })
    } else {
        ElMessage.warning('驳回说明为必填项不能为空！')
    }
}
onMounted(() => {
    getTypeData()
    getroleTypeData()

})

</script>
<style scoped>
.grid_cont {
    min-height: 600px;
    background: #fff;
}

.grid_cont2 {
    width: 100%;
    background: #fff;
    height: 65px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
    box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
    width: 80px;
    height: 30px;
}

.grid_btn:hover {
    opacity: 0.8;
}
</style>